<template>
    <el-container class="indexContainer">
        <el-header>
            <div>
                <img src="../assets/img/tubiao.png">
                <span>后台管理系统</span>
            </div>
            <el-button type="success" @click="exit">退出</el-button>
        </el-header>
        <el-container>
            <el-aside :width="isCollapse? '70px' : '150px'">
                <div class="toggleMenu" @click="toggle">|||</div>
                <el-menu
                        :unique-opened="true"
                        class="menu"
                        background-color="#393857"
                        text-color="#fff"
                        active-text-color="#409eff"
                        :collapse="isCollapse"
                        :collapse-transition="false"
                        router
                        :default-active="activePath">
                    <el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
                        <template slot="title">
                            <i :class="iconObj[item.id]"></i>
                            <span>{{item.authName}}</span>
                        </template>
                        <el-menu-item :index="'/'+menuItem.path" v-for="menuItem in item.children" :key="menuItem.id" @click="setActivePath('/'+menuItem.path)">
                            <template slot="title">
                                <i class="el-icon-menu"></i>
                                <span>{{menuItem.authName}}</span>
                            </template>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <keep-alive :include="cashViews">
                    <router-view></router-view>
                </keep-alive>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    export default {
        name: "index",
        data(){
            return{
                menuList:[],
                iconObj:{
                    '125':'el-icon-user',
                    '103':'el-icon-s-grid',
                    '101':'el-icon-goods',
                    '102':'el-icon-tickets',
                    '145':'el-icon-data-analysis'
                },
                isCollapse:false,
                activePath:'',
                //定义需要缓存的组件
                cashViews:['list']
            };
        },
        methods:{
            exit(){
                window.sessionStorage.removeItem('token');
                this.$router.replace("/login")
            },
            getMenuList(){
                this.$http.get('menus').then((result)=>{
                    if (result.data.meta.status!=200){
                        this.$message.error(result.data.meta.msg)
                    }
                    this.menuList=result.data.data
                })
            },
            toggle(){
                this.isCollapse=!this.isCollapse
            },
            setActivePath(activePath){
                window.sessionStorage.setItem("activePath",activePath)
                this.activePath=window.sessionStorage.getItem("activePath")
            }
        },
        created() {
            this.getMenuList();
            this.activePath=window.sessionStorage.getItem("activePath")
        }
    }
</script>

<style scoped>
    .indexContainer{
        height: 100%;
    }
    .el-header{
        padding-left: 0;
        background-color: #409EFF;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .el-header div{
        display: flex;
        align-items: center;
    }
    .el-aside{
        background-color: #393857;
    }
    .toggleMenu{
        background-color: #393857;
        color: #fff;
        text-align: center;
        font-size: 14px;
        letter-spacing: 0.2em;
        cursor: pointer;
    }
    .menu{
        width: 100%;
    }
</style>
